<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频监控</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100vw;
        height: 100vh;
      }
      body {
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
      }
      video {
        width: 50%;
        height: 50%;
        box-sizing: border-box;
        border: 1px dashed gray;
      }
    </style>
  </head>
  <body>
    <video
      autoplay
      allowfullscreen="true"
      x5-video-player-fullscreen="true"
      id="v0"
    ></video>
    <video
      autoplay
      allowfullscreen="true"
      x5-video-player-fullscreen="true"
      id="v1"
    ></video>
    <video
      autoplay
      allowfullscreen="true"
      x5-video-player-fullscreen="true"
      id="v2"
    ></video>
    <video
      autoplay
      allowfullscreen="true"
      x5-video-player-fullscreen="true"
      id="v3"
    ></video>
    <script src="js/ezuikit.js"></script>
    <script>
      let vid = getUrlParam("vid"),
        token = localStorage.getItem("token");
      window.onload = function () {
        if (token && vid) {
          vid = vid.split(",");
          vid.forEach((d, index) => {
            getVideoDetail(d, index);
          });
        }
      };

      function getVideoDetail(id, index) {
        fetch(`/iot_device/device/getVideoSource?id=${id}`, {
          headers: {
            "Content-type": "application:/x-www-form-urlencoded:charset=UTF-8",
            token: token,
          },
        }).then(async (response) => {
          let res = await response.json();
          if (res.message == 200) {
            console.info(res.data);
            let accessToken = getUrlParam(
              "accessToken",
              res.data.Source.split("?")[1]
            );
            let url = getUrlParam("url", res.data.Source.split("?")[1]);
            let player = new EZUIKit.EZUIKitPlayer({
              id: "v" + index, // 视频容器ID
              controls: false,
              accessToken,
              url
            });
          }
        });
      }

      // 获取URL地址参数
      function getUrlParam(name, url = window.location.search.substr(1)) {
        let vars = url.split("&");
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split("=");
          if (pair[0] == name) {
            return pair[1];
          }
        }
        return false;
      }
    </script>
  </body>
</html>
